<template>
  <div text-center py-99 class="bg-#EEF2F7">
    <h1 text-40 mb-22>服务<span class="text-#448BF5">群体</span></h1>
    <div class="text-#5F6368 text-18 mb-83">
      熵付通支付服务广泛应用于各行业，满足不同场景的支付需求
    </div>
    <div class="serviceTo-grid m-auto">
      <div v-for="(i, idx) in serviceToList" :key="idx" class="serviceTo-item text-center">
        <div class="icon-wrap">
          <img :src="i.icon" alt="" />
        </div>
        <div class="text-25 font-bold mt-25 mb-6">{{ i.title }}</div>
        <div class="text-#5F6368 text-16 line-height-24">{{ i.desc }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import icon1 from '@/assets/image/serviceTo1.png'
import icon2 from '@/assets/image/serviceTo2.png'
import icon3 from '@/assets/image/serviceTo3.png'
import icon4 from '@/assets/image/serviceTo4.png'
import icon5 from '@/assets/image/serviceTo5.png'
import icon6 from '@/assets/image/serviceTo6.png'
import { ref, reactive } from 'vue'
const serviceToList = reactive([
  {
    icon: icon1,
    title: '电商零售',
    desc: '为电商平台提供全渠道支付解决方案，提升转化率和用户体验，支持多级分账和营销工具'
  },
  {
    icon: icon2,
    title: '在线教育',
    desc: '为教育机构提供课程购买、分期支付、续费提醒等全流程解决方案，支持多校区账务管理'
  },
  {
    icon: icon3,
    title: '跨境贸易',
    desc: '为跨境企业提供全球收款、多币种结算、汇率风险管理等解决方案，支持海关报关集成'
  },
  {
    icon: icon4,
    title: '旅游酒店',
    desc: '为旅游平台和酒店提供预订支付、分账结算、会员储值等解决方案，支持多种支付方式'
  },
  {
    icon: icon5,
    title: '游戏娱乐',
    desc: '为游戏平台提供虚拟货币充值、道具购买、会员订阅等支付解决方案，支持高并发交易'
  },
  {
    icon: icon6,
    title: '餐饮服务',
    desc: '为餐饮企业提供扫码点餐、会员储值、分账结算等解决方案，提升运营效率'
  }
])
</script>

<style scoped lang="scss">
.serviceTo-grid {
  display: grid;
  grid-template-columns: repeat(3, 360px);
  justify-content: center;
  grid-gap: 40px;
  .serviceTo-item {
    height: 327px;
    padding: 44px 35px 0;
    background: #ffffff;
    border-radius: 19.15px;
    background: #ffffff;
    border-width: 4px 0px 0px 0px;
    border-style: solid;
    border-color: #448bf5;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
    .icon-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      width:  80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(0, 48, 135, 0.08);
      margin: 0 auto;
      img {
        height: 40px;
      }
    }
  }
}
</style>
